<script setup lang="ts">
import { onMounted, ref } from 'vue';
import {
    BIconVinyl
} from "bootstrap-icons-vue";

const path = ref("")
const xml = defineModel<string>()

/**解析xml文件*/
const getXml = ()=> {
    return `<disk type="file" device="cdrom">
  <driver name="qemu" type="raw"/>
  <source file="${path.value}"/>
  <readonly/>
</disk>`;
}

/**参数解析*/
const cdromParse = ()=>{

     if(xml.value != null){
        const parser = new DOMParser();
        const doc = parser.parseFromString(xml.value, "text/xml");
       let source = doc.getElementsByTagName("source")[0]?.getAttribute("file");
       path.value = source != null ? source : "";
    }
}

/** 鼠标离开时构建*/
const mouseleave = ()=>{
    xml.value = getXml()
    console.log(xml.value)
}

onMounted(()=>{
    cdromParse()
})

</script>

<template>
    <div @mouseleave="mouseleave" style="padding: 12px 8px;box-shadow: var(--el-box-shadow-light)">
        <div style="font-size: 22px; margin-left: 15px; color: green;margin-bottom: 18px;"><BIconVinyl style="position: relative; top: 2px;margin-right: 3px" > </BIconVinyl>磁盘</div>
        <el-form-item label="光盘"  @mouseleave="mouseleave">
            <el-input v-model="path" style="width: 90%"/>
            <el-button style="width: 10%"> 选择</el-button>
        </el-form-item>
    </div>
</template>